<template>
	<view class="wc-card-item" @tap="navigate">
		<view class="wc-card-item__left">
			<view class="xs" :style="{color: styles.color}">
				<text class="sup-name">{{item.name}}</text>
			</view>
			<view>
				<text class="sub-name">{{item.name2}}</text>
			</view>
		</view>
		<view class="wc-card-item__right">
			<u-image 
				class="" 
				:border-radius="$px2rpx(styles.img_border_radius)" 
				v-if="content.style==1" 
				:src="$getImageUri(item.url)" 
				mode="widthFix"
				width="100rpx"  >
				<u-loading slot="loading"></u-loading>
			</u-image>
		</view>
		
		
	</view>
</template>

<script type="text/javascript">
	export default {
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
			item: {
				type: Object
			},

		},
		data() {
			return {

			}
		},
		methods: {
			navigate() {
				const { path, params} = this.item.link
				if(!path) return
				this.$Router.push({
					path: path,
					query: params
				})
			}
		},
		computed: {

		}
	};
</script>

<style lang="scss" scoped>
	// 盒子必须给高度，因为需要保持四个盒子一样大小，内部图片,高度自适应。
	.wc-card-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 144rpx;
		gap: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		// background: linear-gradient(180deg, #FDD727, #FFFFFF);
	}
	.wc-card-item__left {
		flex: 1;
	}
	.sup-name {
		font-size: 32rpx;
		font-weight: 700;
		color: #000;
	}
	.sub-name {
		font-size: 24rpx;
		color: #999999;
	}
</style>
